<template>
    <el-form ref="ruleFormRef" :model="ruleForm" >
    <el-descriptions border :column="1" >
        <el-descriptions-item label="物料名称">{{ ruleForm.warehouse.title }}</el-descriptions-item>
        <el-descriptions-item label="供应商　"><el-text>{{ ruleForm.supplier }}</el-text></el-descriptions-item>
        <el-descriptions-item label="批次号　"><el-text>{{ ruleForm.numbers }}</el-text></el-descriptions-item>
        <el-descriptions-item label="数量　　"><el-text>{{ ruleForm.quantity }}</el-text></el-descriptions-item>
        <el-descriptions-item label="入库日期"><el-text>{{ ruleForm.in_date }}</el-text></el-descriptions-item>
        <el-descriptions-item label="位置　　"><el-text>{{ ruleForm.storage }}</el-text></el-descriptions-item>
        <el-descriptions-item label="备注　　"><el-text>{{ ruleForm.remarks }}</el-text></el-descriptions-item>
    </el-descriptions>
    </el-form>
    <el-dialog v-model="showFile" title="文件">
        <el-image style="width: 200px;" :src="files" />
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { ref, watch } from 'vue';
import http from '../util/request';
import { FormInstance } from 'element-plus';

const showFile = ref<boolean>(false)

const files = ref<string>('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<any>({warehouse:{title:''}})

const getData = () => {
    if(ruleForm.value.id == 0){
        return;
    }
    http.get('/warehouse_ins/'+ruleForm.value.id).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
        }
    })
}


const props = defineProps<{
    data:any
    type:boolean
}>()

watch(props,()=>{
    ruleForm.value.id = props.data
    getData()
},{ immediate: true })

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
</style>
